<template>
  <div class="wrapper">
    <ul>
      <li>
        <h2>
          <span>用户信息统计共</span>
          <span v-text="(userIncreTendency.total || 0) + '人'"></span>
        </h2>
        <div id="userInfo"></div>
      </li>
      <li>
        <h2>
          <span>证书信息统计共</span>
          <span v-text="(certiIncreTendency.total || 0) + '个'"></span>
        </h2>
        <div id="certificateInfo"></div>
      </li>
      <li>
        <h2>
          <span>订单信息统计共</span>
          <span v-text="(orderIncreTendency.total || 0) + '单'"></span>
          </h2>
        <div id="orderInfo"></div>
      </li>
      <li>
        <h2>
          <span>商品信息统计共</span>
          <span v-text="(goodsIncreTendency.total || 0) + '种,在售' + (goodsIncreTendency.is_sell_total || 0) + '种'"></span>
        </h2>
        <div id="goodsInfo"></div>
      </li>
    </ul>
  </div>
</template>
<script>
// import { hasIn } from 'lodash'
import echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  created () {
    this.getUserIncreTendency()
    this.getCertiIncreTendency()
    this.getOrderIncreTendency()
    this.getGoodsIncreTendency()
  },
  computed: {
    ...mapState({
      userIncreTendency: state => state.user.userIncreTendency,
      certiIncreTendency: state => state.certificate.certiIncreTendency,
      orderIncreTendency: state => state.order.orderIncreTendency,
      goodsIncreTendency: state => state.goods.goodsIncreTendency
    })
  },
  data () {
    return {
      detail: {earningsList: []},
      doms: {
        userInfo: null,
        certificateInfo: null,
        orderInfo: null,
        goodsInfo: null
      }
    }
  },
  methods: {
    // 判读是否获取要绘图的dom对象
    getDom (id) {
      if (!document) {
        return false
      }
      this.doms[id] = document.getElementById(id)
      return this.doms[id]
    },
    // 绘制收益走势图
    draw (id, type, data, title) {
      // console.log('nextTick::', 3)
      this.$nextTick(function () {
        if (!this.getDom(id)) {
          return false
        }
        let myChart = echarts.init(this.doms[id])
        let xAxis = []
        let series = []
        for (let k in data) {
          xAxis.push(data[k].date)
          series.push(data[k].value)
        }
        // 绘制图表
        myChart.setOption({
          // title: {
            //   text: 'ECharts 入门示例'
          // },
          tooltip: {},
          xAxis: {
            data: xAxis
          },
          yAxis: {},
          series: [{
            name: title,
            type: type,
            data: series,
            itemStyle: {
              normal: {
                color: '#67C23A',
                lineStyle: {
                  color: '#67C23A',
                  width: 2
                }
              }
            }
          }]
        })
      })
    },
    // 获取用户的统计信息
    getUserIncreTendency () {
      this.$store.dispatch('user/userIncreTendency').then(() => {
        this.draw('userInfo', 'line', this.userIncreTendency.weekIncre, '人数')
      }).catch(() => {})
    },
    // 获取证书统计信息
    getCertiIncreTendency () {
      this.$store.dispatch('certificate/certiIncreTendency').then(() => {
        this.draw('certificateInfo', 'bar', this.certiIncreTendency.weekIncre, '个数')
      }).catch(() => {})
    },
    // 获取订单的统计信息
    getOrderIncreTendency () {
      this.$store.dispatch('order/orderIncreTendency').then(() => {
        this.draw('orderInfo', 'line', this.orderIncreTendency.weekIncre, '单数')
      }).catch(() => {})
    },
    // 获取商品的统计信息
    getGoodsIncreTendency () {
      this.$store.dispatch('goods/goodsIncreTendency').then(() => {
        this.draw('goodsInfo', 'line', this.goodsIncreTendency.weekIncre, '种类')
      }).catch(() => {})
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../assets/scss/base.scss";
.wrapper{
  // border: 1px solid red;
  ul{
    li{
      display: inline-block;
      vertical-align: top;
      width: 46%;
      &:nth-of-type(even) {
        // background: red;
        margin-left: 4% !important;
      }
      h2{
        color: $c-t-main;
        span{
          display: inline-block;
          vertical-align: top;
          font-size: 20px;
          line-height: 31px;
        }
      }
      div{
        border: 1px solid #CCC;
        width: 100%;
        height: 300px;
      }
    }
  }
}
</style>
